<ion-header>
  <ion-navbar>
    <div class="operationl-segment-wrap" data-flex="mean:box">
      <div data-flex-box="1" data-flex="cross:center main:center" [ngClass] = "selected === 'target' ? 'active' : ''"
           (click)="segmentSelected('target')">指标监控</div>
      <div data-flex-box="1" data-flex="cross:center main:center" [ngClass] = "selected === 'process' ? 'active' : ''"
           (click)="segmentSelected('process')">流程监控</div>
      <div data-flex-box="1" data-flex="cross:center main:center" [ngClass] = "selected === 'composite' ? 'active' : ''"
           (click)="segmentSelected('composite')">综合标杆</div>
    </div>
  </ion-navbar>
</ion-header>

<ion-content>
  <!--<ion-content padding>-->
  <div class="slide-warp">
    <!--<div [ngSwitch]="segmentSelected">-->
      <div class="target-wrap" [hidden]="selected !== 'target'">
        <div class="slide-warp-title" data-flex="box:mean">
          <div data-flex-box="1">公司战略运营总览</div>
          <div data-flex-box="1" data-flex="main:right"><i>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhibiaozidingyiqiapian"></use>
              </svg>
            </i></div>
        </div>
        <div class="define-swiper-pagination swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
          <button class="swiper-pagination-bullet swiper-pagination-bullet-active" aria-label="Go to slide 1" data-slide-index="0"></button>
          <button class="swiper-pagination-bullet" aria-label="Go to slide 2" data-slide-index="1"></button>
          <button class="swiper-pagination-bullet" aria-label="Go to slide 3" data-slide-index="2"></button>
        </div>

        <ion-slides pager>
          <ion-slide class="define-slide">
            <h2>
              <quota-cards></quota-cards>
            </h2>
          </ion-slide>

          <ion-slide class="define-slide">
            <h2>
              <key-data-card></key-data-card>
            </h2>
          </ion-slide>
          <ion-slide class="define-slide">
            <h2>
              <rank-cards></rank-cards>
            </h2>
          </ion-slide>
          <ion-slide class="define-slide">
            <h2>
              <strategy-card></strategy-card>
            </h2>
          </ion-slide>
          <ion-slide class="define-slide">
            <h2>
              <cash-flow #cashFlow></cash-flow>
            </h2>
          </ion-slide>
          <ion-slide class="define-slide">
            <h2>
              <real-time-electricity #realTime></real-time-electricity>
            </h2>
          </ion-slide>
          <ion-slide class="define-slide">
            <h2>
              <world-ranking-card></world-ranking-card>
            </h2>
          </ion-slide>
        </ion-slides>

      </div>
    <!--</div>-->
  </div>
  <!--</ion-content>-->
</ion-content>
